<!-- 组件说明 -->
<template>
  <div class="loginwrap">
    <!--    <goback :title="''"></goback>-->
    <div class="title">
      Login Via Mobile Number
    </div>
    <div class="loginPicker" @click.stop="countrySelectIfShow = true">
      <div class="left">
        <p>Region</p>
        <span>{{ currentCountryName }}</span>
      </div>
      <van-icon v-if="true" class="btnicon" name="arrow" />
      <!--      :color="item.btnColor"-->
    </div>
    <div class="phoneNumberShowWrap">
      <p class="currentCountryCode">+{{ currentCountryCode }}</p>
      <span>|</span>
      <van-field
        class="phoneNumberShow"
        readonly
        clickable
        :value="phoneNumber"
        @touchstart.native.stop="keyboardShow = true"
      />
    </div>
    <van-number-keyboard
      v-model="phoneNumber"
      :show="keyboardShow"
      :maxlength="15"
      @blur="keyboardShow = false"
    />
    <div class="btns">
      <van-button
        :class="btnReady ? 'nextBtn nextBtnReady' : 'nextBtn'"
        @click.stop="nextBtnFn"
        :loading="nextIfLoading"
        type="info"
        loading-text="loading..."
        >NEXT</van-button
      >
    </div>

    <van-picker
      title="Region"
      v-show="countrySelectIfShow"
      show-toolbar
      value-key="CountryName"
      :columns="countriesArr"
      confirm-button-text="Confirm"
      cancel-button-text="Cancle"
      @confirm="countrySelectConfirm"
      @cancel="countrySelectIfShow = false"
      @change="countrySelectChange"
    />
  </div>
</template>

<script>
//import x from ''
export default {
  components: {},
  data() {
    return {
      // countriesArr: [],
      countrySelectIfShow: false,
      ajaxCountriesArr: [
        {
          CountryName: "India",
          countryId: "1",
          countryCode: "91"
        },
        {
          CountryName: "Hongkong",
          countryId: "2",
          countryCode: "852"
        },
        // {
        //   CountryName: "China",
        //   countryId: "3",
        //   countryCode: "86"
        // },
        {
          CountryName: "Japan",
          countryId: "4",
          countryCode: "81"
        },
        {
          CountryName: "Canada",
          countryId: "5",
          countryCode: "001"
        },
        {
          CountryName: "USA",
          countryId: "6",
          countryCode: "001"
        }
      ],
      currentCountryCode: "91",
      currentCountryId: "",
      currentCountryName: "India",
      nextIfLoading: false,
      phoneNumber: "",
      keyboardShow: false, //手机号的软键盘状态 默认不显示

      isExist: true //此帐号是否为新注册帐号
    };
  },
  computed: {
    countriesArr() {
      return this.ajaxCountriesArr;
    },
    btnReady() {
      if (this.phoneNumber && this.phoneNumber.length > 3) {
        return true;
      }
      return false;
    }
  },
  methods: {
    nextBtnFn() {
      if (!this.btnReady) return;
      let zs = this;
      // this.nextIfLoading = true;

      zs.api.userController
        .userObatinRegistersmsSurplustime({
          phone: zs.currentCountryCode + zs.phoneNumber
        })
        .then(res => {
          console.log(res);
          if (res.data.code === 200) {
            if (res.data.data == 0) {
              zs.userObatinRegistersmsFn();
            } else {
              zs.$toast({
                message: "Wait " + res.data.data + " S to try again!"
              });
            }
          } else {
            zs.$toast(res.data.info);
          }
        });
    },
    userObatinRegistersmsFn() {
      let zs = this;
      this.nextIfLoading = true;
      zs.api.userController
        .userObatinRegistersms({
          phone: zs.currentCountryCode + zs.phoneNumber
        })
        .then(res => {
          console.log(res);
          if (res.data.code === 200) {
            zs.$toast("Send success");
            zs.isExist = res.data.data.exist; // TODO:待完善
            this.gotoForgetpswd();
          } else {
            zs.$toast(res.data.info);
            this.nextIfLoading = false;
          }
        });
    },
    gotoForgetpswd() {
      let zs = this;
      zs.$router.push({
        path: "/forgetpswd",
        query: {
          phoneNumber: zs.currentCountryCode + zs.phoneNumber,
          ifNew: zs.isExist ? 0 : 1
        }
      });
    },
    countrySelectConfirm(value, index) {
      console.log(`当前值：${value}, 当前索引：${index}`);
      if (
        this.ajaxCountriesArr &&
        this.ajaxCountriesArr[index] &&
        this.ajaxCountriesArr[index].CountryName
      ) {
        this.currentCountryName = this.ajaxCountriesArr[index].CountryName;
        this.currentCountryId = this.ajaxCountriesArr[index].countryId;
        this.currentCountryCode = this.ajaxCountriesArr[index].countryCode;
      }
      this.countrySelectIfShow = false;
    },
    // countrySelectCancel() {},
    countrySelectChange(picker, value, index) {
      console.log(`当前值：${value}, 当前索引：${index}`);
    },
    goback() {
      this.$router.go(-1);
    },
    // 用户输入的验证码 确认事件
    imgcodeconfirm(data) {
      console.log(data);
      let zs = this;
      this.imgcodestatus = false;
      this.imgcode = data;
      this.$toast.loading({
        message: "waiting",
        duration: 0,
        forbidClick: true
      });
      if (zs.currenttype == 2) {
        // post_msg_register 注册获取验证码
        zs.api.userapis
          .post_msg_register({
            phone: Number(zs.phone2),
            key: sessionStorage.getItem("imgsessioncode"),
            code: data
          })
          .then(res => {
            console.log(res);
            if (res.data.code === 200) {
              zs.$toast("Send success");
              // TODO: 测试阶段 直接把返回的code赋值即可
              zs.phonecode = res.data.sms_code;
            } else {
              zs.$toast(res.data.info);
            }
          });
      } else if (zs.currenttype == 1) {
        // get_loginneedmsg 登录获取验证码
        zs.api.userapis
          .get_loginneedmsg({
            phone: Number(zs.phone),
            key: sessionStorage.getItem("imgsessioncode"),
            code: data
          })
          .then(res => {
            console.log(res);
            if (res.data.code === 200) {
              // zs.$toast.clear();
              zs.$toast("Send success");
            } else {
              zs.$toast(res.data.info);
            }
          });
      }
    },
  },
  mounted() {
    this.$store.commit("resetuserdata");
    window.sessionStorage.clear();
    window.localStorage.clear();
    localStorage.setItem("createdtime", 1);
  }
};
</script>
<style lang="less" scoped>
@import url("./../../assets/css/common.less");

.loginwrap {
  background-color: rgba(221, 245, 255, 1);
  color: rgba(51, 51, 51, 1);
  .van-button--info {
    border-color: transparent;
  }
  box-sizing: border-box;
  .title {
    padding: 1.6rem 0.5rem 0.5rem;
    font-size: 0.4rem;

    font-weight: bold;
    line-height: 0.6rem;
    height: 0.6rem;
    color: #333333;
    opacity: 1;
  }
  .loginPicker {
    width: 6.2rem;
    height: 1rem;
    line-height: 1rem;
    background: #ffffff;
    opacity: 1;
    border-radius: 0.2rem;
    margin: 0 auto 0.3rem;
    padding: 0 0.4rem;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    .left {
      display: flex;
      //justify-content: space-between;
      p {
        padding-right: 0.4rem;
      }
    }
    .btnicon {
      height: 1rem;
      width: 1rem;
      line-height: 1rem;
      cursor: pointer;
      text-align: right;
    }
  }
  .phoneNumberShowWrap {
    width: 6.2rem;
    height: 1rem;
    line-height: 1rem;
    background: #ffffff;
    opacity: 1;
    border-radius: 0.2rem;
    margin: 0 auto 0.3rem;
    padding: 0 0.4rem;
    box-sizing: border-box;
    display: flex;
    * {
      height: 1rem;
      line-height: 1rem;
      padding-top: 0;
      padding-bottom: 0;
    }
    .currentCountryCode {
      width: 4em;
      text-align: center;
    }
    & > span {
    }
    .phoneNumberShow {
    }
  }
  .btns {
    .nextBtn {
      width: 6.2rem;
      height: 1rem;
      margin: 1rem auto 0.9rem;
      display: block;
      cursor: pointer;
      background: linear-gradient(
        270deg,
        rgba(254, 237, 85, 0.3),
        rgba(255, 196, 0, 0.3)
      );
      opacity: 0.3;
      border-radius: 1rem;
      font-size: 0.4rem;

      font-weight: bold;
      line-height: 1rem;
      color: #663929;
      opacity: 1;
      &.nextBtnReady {
        background: linear-gradient(
          270deg,
          rgba(254, 237, 85, 1),
          rgba(255, 196, 0, 1)
        );
        color: rgba(102, 57, 41, 1);
      }
    }
  }
}
</style>
